Ext.define('Jason.view.protal.pages.FAQ', {
    extend: 'Ext.container.Container',
    xtype: 'faq',

    requires: [
        'Ext.panel.Panel',
        'Ext.plugin.Responsive',
        'Ext.button.Button',
        'Ext.layout.container.Accordion'
    ],

    layout: {
        type: 'hbox',
        align: 'stretch'
    },

    items: [
        {
            xtype: 'panel',
            cls: 'faq-left-sidebar shadow-panel',
            header: false,
            ui: 'light',
            responsiveConfig: {
                'width < 1000': {
                    width: 0,
                    visible: false
                },
                'width >= 1000 && width < 1600': {
                    width: 230,
                    visible: true
                },
                'width >= 1600': {
                    width: 300,
                    visible: true
                }
            },

            items: [
                {
                    xtype: 'panel',
                    title: '使用提示',
                    ui: 'light',
                    cls: 'shadow-panel pages-faq-container',
                    iconCls: 'x-fa fa-lightbulb-o',
					//http://docs.sencha.com/extjs/6.0.0/index.html
                    html: '<p>我们为用户创建了以下提示列表。 我们希望他们能帮助您充分利用本网站.</p> \n<ul class=\'faq-tips-list\'><li class=\'pointone\'>fontawesome</li><li class=\'pointtwo\'>Ext帮助文档</li><li class=\'pointthree\'>...</li>\n<li class=\'pointfour\'>...</li></ul>',
                    bodyPadding: 15
                },
                {
                    xtype: 'panel',
                    bodyPadding: 20,
                    ui: 'light',
                    cls: 'shadow-panel pages-faq-container',
                    iconCls: 'x-fa fa-question',
                    title: '无法找到您要的内容?',
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'box',
                            html: '<p>帮助只是一封电子邮件或一个电话。如果您无法在此页面上找到您需要的内容，我们的客户服务代表将乐意为您提供帮助。</p><br>'
                        },
                        {
                            xtype: 'button',
                            ui:'soft-blue',
                            margin: '20 20 20 20',
                            text: '联系我们'
                        }
                    ]
                }
            ],
            plugins: [
                {
                    ptype: 'responsive'
                }
            ]
        },
        {
            xtype: 'panel',
            ui: 'light',
            margin: '0 0 0 10',
            flex: 1,
            cls: 'pages-faq-container shadow-panel',
            iconCls: 'x-fa fa-question-circle',
            title: '常见问题解答',
            bodyPadding: 15,
            items: [
                {
                    xtype: 'panel',
                    cls: 'FAQPanel',
                    layout: 'accordion',
                    title: '组件使用',
                    height: 340,
                    ui: 'light',
                    items: []
                },
                {
                    xtype: 'panel',
                    cls: 'FAQPanel',
                    layout: 'accordion',
                    title: '帐号',
                    height: 340,
                    bodyPadding: 10,
                    ui: 'light',
                    items: [
                        {
                            xtype: 'panel',
                            html: '我们这样可以停用我的帐号.',
                            title: '我们这样可以停用我的帐号?',
                            iconCls:'x-fa fa-caret-down'
                        }
                    ]
                }
            ]
        }
    ]
});
